<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css"  media="all">
</head>
<body>
<!-- 修改的form表单 -->
<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 20px 30px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="用户名" autocomplete="on" class="layui-input">
            <input type="hidden" name="id">
            <input type="hidden" name="photo">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nick" placeholder="昵称" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked>
            <input type="radio" name="sex" value="女" title="女">
            <input type="radio" name="sex" value="其他" title="其他">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline" style="width: 85%">
            <label class="layui-form-label">上传头像</label>
            <button type="button" class="layui-btn" id="uploadImg">
                <i class="layui-icon">&#xe67c;</i>上传头像
            </button>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-inline">
            <input type="password" name="pwd" placeholder="用户密码" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-inline">
            <input type="text" name="tel" placeholder="联系电话" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <textarea name="autograph" placeholder="个性签名，最多不超过 16 个字。" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在省</label>
        <div class="layui-input-inline">
            <input type="text" name="province" placeholder="所在省" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在城市</label>
        <div class="layui-input-inline">
            <input type="text" name="city" placeholder="所在城市" autocomplete="on" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">选择要关注的上师</label>
        <div class="layui-input-inline">
            <select name="guruId" id="selectGuru2">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态设置</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="冻结该用户" checked>
            <input type="radio" name="status" value="0" title="正常">
            <input type="radio" name="status" value="2" title="已被删除">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">提交修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 添加的form表单 -->
<form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 20px 30px 0 0">

    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="用户名" autocomplete="on" class="layui-input">
            <input type="hidden" name="photo">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
            <input type="text" name="nick" placeholder="昵称" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked>
            <input type="radio" name="sex" value="女" title="女">
            <input type="radio" name="sex" value="其他" title="其他">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline" style="width: 85%">
            <label class="layui-form-label">上传头像</label>
            <button type="button" class="layui-btn" id="uploadFile">
                <i class="layui-icon">&#xe67c;</i>上传头像
            </button>
            <input type="hidden" name="createDate">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-inline">
            <input type="password" name="pwd" placeholder="用户密码" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-inline">
            <input type="text" name="tel" placeholder="联系电话" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">个性签名</label>
        <div class="layui-input-block">
            <textarea name="autograph" placeholder="个性签名，最多不超过 16 个字。" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在省</label>
        <div class="layui-input-inline">
            <input type="text" name="province" placeholder="所在省" autocomplete="on" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在城市</label>
        <div class="layui-input-inline">
            <input type="text" name="city" placeholder="所在城市" autocomplete="on" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">选择要关注的上师</label>
        <div class="layui-input-inline">
            <select name="guruId" id="selectGuru">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态设置</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="冻结该用户" checked>
            <input type="radio" name="status" value="0" title="正常">
            <input type="radio" name="status" value="2" title="已被删除">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">提交添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="layui/layui.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/html" id="guru">
    {{d.guru.nickName}}
</script>
<script type="text/html" id="img">
    <img src="/cmfz/{{d.photo}}" style="height: 50px"/>
</script>
<script type="text/html" id="status">
    {{#  if(d.status == 2){ }}
    已删除
    {{#  } else if(d.status == 1) {   }}
    已被冻结
    {{#  } else {   }}
    正常
    {{#  }          }}
</script>
<!--工具栏-->
<table id="userTable" lay-filter="userTableFilter"></table>
<script type="text/html" id="tb1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="ban">冻结</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="tb2">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">批量删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="add">添加用户</a>
</script>
<script>
    layui.use(['table', 'form', 'laydate', 'layer','upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var date = layui.date;
        var upload = layui.upload;

        table.render({
            elem: '#userTable',
            url: 'user/show',
            page: true,
            limit: 20,
            limits: [10, 20, 30],
            toolbar: '#tb2',
            cols: [[
                {type: 'checkbox'}
                , {title: '编号', field: 'id'}
                , {title: '头像', templet:'#img'}
                , {title: '用户名', field: 'name'}
                , {title: '昵称', field: 'nick'}
                , {title: '性别', field: 'sex'}
                , {title: '密码', field: 'pwd'}
                , {title: '电话', field: 'tel'}
                , {title: '签名', field: 'autograph'}
                , {title: '省份', field: 'province'}
                , {title: '城市', field: 'city'}
                , {title: '注册日期', field: 'createDate'}
                , {title: '状态', templet:'#status'}
                , {title: '关注的上师', templet:'#guru'}
                , {title: '操作', toolbar: '#tb1'}
            ]]
        });

        // 添加前上传
        upload.render({
            elem:'#uploadFile'
            // ,accept: 'audio' //只允许上传音频文件
            ,url:'user/upload'
            ,done:function (res) {
                form.val('addFormFilter',{
                    photo:res.photo,
                });
                console.log(res);
                layer.msg('上传成功！');
            }
        });

        // 批量删除
        table.on('toolbar(userTableFilter)',function (obj) {
            var status = table.checkStatus(obj.config.id);
            if (obj.event == 'add'){
                layer.open({
                    type:1,
                    content: $('#addForm'),
                    title:'添加用户'
                })

            }else if (obj.event == 'del'){
                var data = status.data;
                if (data.length == 0){
                    layer.msg('请至少勾选一项！');
                    return;
                }else {
                    var ids = [];
                    for (var i = 0; i<data.length; i++){
                        ids.push(data[i].id);
                    }
                }

                $.ajax({
                    url: 'user/delete',
                    dataType: 'json',
                    data: 'id=' + ids,
                    success:function (result) {
                        if (result.isDelete){
                            layer.msg('删除成功！');
                            table.reload('userTable');
                        }else {
                            layer.msg('删除失败！');
                            table.reload('userTable');
                        }
                    }
                })
            }
        })

        // 添加用户
        form.on('submit(addSubmit)',function () {
            $.ajax({
                url:'user/register',
                dataType:'json',
                data:$('#addForm').serialize(),
                success:function (result) {
                    if (result.isAdd){
                        layer.closeAll();
                        layer.msg('添加成功！');
                        table.reload('userTable');
                        $("#addForm")[0].reset();
                    }else {
                        layer.closeAll();
                        layer.msg('添加失败！');
                        table.reload('userTable');
                        $("#addForm")[0].reset();
                    }
                }
            })
            return false;
        });

        // 绑定单个删除事件

        table.on('tool(userTableFilter)', function (obj) {
            var data = obj.data;
            var id = obj.data.id;
            console.log(obj);
            if (obj.event == 'del') {
                layer.confirm('确认要删除？', function (index) {
                    $.ajax({
                        url: 'user/delete',
                        dataType: 'json',
                        data: 'id=' + id,
                        success: function (result) {
                            if (result.isDelete) {
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功！");
                            } else {
                                layer.close(index);
                                layer.msg("删除失败！");
                            }
                        }
                    });
                });
            }else if (obj.event == 'edit'){
                $.ajax({
                    url: 'user/showOne',
                    dataType: 'json',
                    data: 'id=' + id,
                    success: function (result) {
                        form.val('updateFormFilter', {
                            id:result.id,
                            name: result.name,
                            pwd:result.pwd,
                            status: result.status,
                            tel:result.tel,
                            photo:result.photo,
                            nick:result.nick,
                            sex:result.sex,
                            autograph:result.autograph,
                            province:result.province,
                            city:result.city,
                            // createDate:result.createDate,
                            guruId:result.guruId
                        })
                    }
                });
                // 弹出修改表单
                layer.open({
                    type:1
                    ,content: $('#updateForm')
                    ,title:'编辑用户信息'
                })
            }else {
                // 冻结用户
                layer.confirm('确认要冻结该用户么？', function (index) {
                    $.ajax({
                        url: 'user/ban',
                        dataType: 'json',
                        data: 'id=' + id,
                        success: function (result) {
                            if (result.isBan) {
                                layer.close(index);
                                layer.msg("冻结成功！");
                            } else {
                                layer.close(index);
                                layer.msg("冻结失败！");
                            }
                        }
                    });
                });
            }
        });

        // 修改前上传

        upload.render({
            elem:'#uploadImg'
            // ,accept: 'audio' //只允许上传音频文件
            ,url:'user/upload'
            ,done:function (res) {
                form.val('addFormFilter',{
                    photo:res.photo
                });
                console.log(res);
                layer.msg('上传成功！');
            }
        });

        // 修改
        form.on('submit(updateSubmit)',function () {
            $.ajax({
                url: 'user/update',
                data: $("#updateForm").serialize(),
                dataType: 'json',
                success: function (result) {
                    if (result.isUpdate) {
                        console.log('修改成功');
                        layer.msg('修改成功！');
                        $("#updateForm")[0].reset();
                        table.reload('userTable');
                        layer.closeAll();
                    }else {
                        console.log('修改失败');
                        layer.msg('修改失败！');
                        $("#updateForm")[0].reset();
                        layer.closeAll();
                        table.reload('userTable');
                    }
                }
            });
        });

        // 上师下拉框查询
        $.ajax({
            url: 'guru/showAll'
            , dataType: 'json'
            , success: function (result) {
                var ss = "";
                $(result).each(function (i, obj) {
                    ss += "<option value='" + obj.guruId + "'>" + obj.nickName + "</option>";
                })
                $('#selectGuru').html(ss);
                form.render('select');
            }
        });

        $.ajax({
            url: 'guru/showAll'
            , dataType: 'json'
            , success: function (result) {
                var ss = "";
                $(result).each(function (i, obj) {
                    ss += "<option value='" + obj.guruId + "'>" + obj.nickName + "</option>";
                })

                $('#selectGuru2').html(ss);
                form.render('select');
            }
        });
    });
</script>
</body>
</html>